
<template>
  <div class="popupMask">
    <div class="popupPenal">
      <div class="popPenalTitle">
        <div class="popPenalTitleName">
          样品登记
        </div>
        <div class="popupClose" v-on:click="close">
          <el-button size="mini">关闭</el-button>
        </div>
      </div>
      <div class="penalContent" >
        <div>
          <el-table
                :data="pinrtData"
                style="width: 100%"
                size="mini"
                border
                >
                <el-table-column
                  property="yangpin"
                  label="编号"
                  min-width="100px">
                </el-table-column>
                <el-table-column
                  property="jiancedian"
                  label="监测点"
                  min-width="100px">
                </el-table-column>
                <el-table-column
                  property="caiyangriqi"
                  label="采样日期"
                  min-width="100px">
                  <template slot-scope="scope">
                      <el-input size="mini" v-model="scope.row.caiyangriqi" placeholder=""></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  property="dayinshu"
                  label="瓶数"
                  min-width="100px">
                  <template slot-scope="scope">
                    <el-input size="mini" v-model="scope.row.dayinshu" placeholder=""></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  property="caiyangren"
                  label="采样人"
                  min-width="100px">
                  <template slot-scope="scope">
                    <el-input size="mini" v-model="scope.row.caiyangren" placeholder=""></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  property="xianchangfuzeren"
                  label="现场负责人"
                  min-width="100px">
                  <template slot-scope="scope">
                    <el-input size="mini" v-model="scope.row.xianchangfuzeren" placeholder=""></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  property="yangpinxingzhuang"
                  label="性状"
                  min-width="150px">
                  <template slot-scope="scope">
                       <el-input  @focus="mouseoverHH(scope.row)" size="mini" style="width:100px;" v-model="scope.row.yangpinxingzhuang" placeholder=""></el-input>
                       <el-button v-if="scope.row.piluru" type="text" size="mini" v-on:click="piluru(scope.row.yangpinxingzhuang)">批量</el-button>
                  </template>
                </el-table-column>
          </el-table>
        </div>
      </div>
      <div class=" penalFooter">
              <el-button class="penalButton" type="primary" size="mini" v-on:click="close">提交</el-button>
              <el-button class="penalButton" size="mini" v-on:click="close">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>

import { mapState } from 'vuex'

export default {
  data () {
    return {
      yesornoValue:'1',
      enableStatusValue:'1',
      pinrtData:[
                  {
                    yangpin:'HJ2018001001',
                    jiancedian:'监测点一',
                    dayinshu:'4',
                    caiyangren:'采样员A',
                    xianchangfuzeren:'现场负责人A',
                    yangpinxingzhuang:'',
                    caiyangriqi:'2018-01-01',
                    piluru:false
                  },
                  {
                    yangpin:'HJ2018001001',
                    jiancedian:'监测点一',
                    dayinshu:'4',
                    caiyangren:'采样员A',
                    xianchangfuzeren:'现场负责人A',
                    yangpinxingzhuang:'',
                    caiyangriqi:'2018-01-01',
                    piluru:false
                  },
                  {
                    yangpin:'HJ2018001001',
                    jiancedian:'监测点一',
                    dayinshu:'4',
                    caiyangren:'采样员A',
                    xianchangfuzeren:'现场负责人A',
                    yangpinxingzhuang:'',
                    caiyangriqi:'2018-01-01',
                    piluru:false
                  },
                  {
                    yangpin:'HJ2018001001',
                    jiancedian:'监测点一',
                    dayinshu:'4',
                    caiyangren:'采样员A',
                    xianchangfuzeren:'现场负责人A',
                    yangpinxingzhuang:'',
                    caiyangriqi:'2018-01-01',
                    piluru:false
                  },
                  {
                    yangpin:'HJ2018001001',
                    jiancedian:'监测点一',
                    dayinshu:'4',
                    caiyangren:'采样员A',
                    xianchangfuzeren:'现场负责人A',
                    yangpinxingzhuang:'',
                    caiyangriqi:'2018-01-01',
                    piluru:false
                  },
                  {
                    yangpin:'HJ2018001001',
                    jiancedian:'监测点一',
                    dayinshu:'4',
                    caiyangren:'采样员A',
                    xianchangfuzeren:'现场负责人A',
                    yangpinxingzhuang:'',
                    caiyangriqi:'2018-01-01',
                    piluru:false
                  }
      ],
    }
  },
  computed:{
    ...mapState(['enableStatus','tableHeightA','yesorno']),
  },
  props:['newOrEdit','canEdit'],
  methods:{
    close(){
      this.$parent.registraDetailShow = false;
    },
    piluru(xz){
      let newarr = this.pinrtData;
      for( var i = 0 ; i < newarr.length ; i++ ){
        newarr[i].yangpinxingzhuang = xz;
      }
    },
    mouseoverHH(row,index){
      
      let newarr = this.pinrtData;
      for( var i = 0 ; i < newarr.length ; i++ ){
        if( newarr[i]!=row ){
          newarr[i].piluru=false;
        }else{
          row.piluru=true;
        }
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.tabName{
    display: inline-block;
    cursor: pointer;
    padding: 0px 15px;
    border: 1px solid #b7b7b7;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    color: #a9a9a9;
}
.activeTab{
  color: #409eff;
}
.tabPageContent{

}
</style>
